import Main from "./Main";
import Footer from "./Footer";
import { useState, useMemo } from "react";
import { Button } from "antd";
import "./TongxinComp.less";
import ThemeContext from "@/utils/ThemeContext";
export default function TongxinComp(): JSX.Element {
	const [count, setCount] = useState<number>(0);
	const [oppose, setOppose] = useState<number>(0);

	const handleCount = (): void => {
		setCount(count + 1);
	};

	const handleOppose = (): void => {
		setOppose(oppose + 1);
	};

	const rate = useMemo((): string => {
		if (count + oppose === 0) return '0%';
		return ((count / (count + oppose)) * 100).toFixed(2) + '%';
	}, [count, oppose]);

	return (
		<ThemeContext.Provider value={{ count, oppose, handleCount, handleOppose }}>
			<div className="tongxin-container">
				<div className="header">组件通信</div>
				<div className="stats-container">
					<div className="stat-item">支持人数：{count}</div>
					<div className="stat-item">反对人数：{oppose}</div>
					<div className="stat-item">支持比率：{rate}</div>
				</div>
				<div className="button-group">
					<Button onClick={handleCount}>支持</Button>
					<Button onClick={handleOppose}>反对</Button>
				</div>
				<Main handleCount={handleCount} count={count} />
				<br />
				<Footer handleOppose={handleOppose} oppose={oppose} />
			</div>
		</ThemeContext.Provider>
	);
}
